<template>
  <div class="cent">
    <el-card class="box-card1">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0 auto;
          width: 95%;
          height: 11%;
        "
      >
        <div style="display: flex; align-items: center">
          <span class="cunname">存证名称：</span
          ><el-input
            v-model="obj.input1"
            size="large"
            placeholder="请输入存证名称"
            clearable
          />
        </div>
        <div style="display: flex; align-items: center">
          <span class="cunname">存证编号：</span
          ><el-input
            v-model="obj.value"
            size="large"
            placeholder="存证编号"
            clearable
          />
        </div>
        <div
          style="
            display: flex;
            justify-content: space-evenly;
            align-items: center;
          "
          class="divs"
        >
          <span class="cunname">存证主体：</span
          ><el-input
            v-model="obj.input2"
            size="large"
            placeholder="请输入存证主体"
            clearable
          />
        </div>
      </div>
      <div>
        <span style="display: inline-block; margin-left: 2.3%">存证时间:</span
        ><el-date-picker
          style="width: 226px; height: 38px; margin: 2% 1.5%"
          v-model="orderTime"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-button
          type="primary"
          size="large"
          style="margin-left: 44%"
          @click="show()"
          >搜索</el-button
        >
        <el-button size="large">重置</el-button>
      </div>
      <div class="box-top" style="margin-top: 2%; margin-left: 3%">
        <div>
          <el-button
            type="primary"
            :icon="Plus"
            style="border: none; width: 100px; height: 35px"
            @click="addexisting"
            >增加存证</el-button
          >
        </div>
      </div>
      <!-- 表格展示数据 -->
      <el-table
        :data="data.lists"
        stripe
        style="width: 98%; align-items: center; margin: 3% auto"
      >
        <el-table-column
          label="存证编号"
          width="150"
          align="center"
          prop="evinums"
        />
        <el-table-column
          label="存证名称"
          width="200"
          align="center"
          prop="evititle"
        />
        <el-table-column
          prop="eviname"
          label="存正主体"
          width="240"
          align="center"
        />
        <el-table-column label="存证类型" width="280" align="center">
          <template #default="slot">
            {{ slot.row.evitype_id.existingName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="evifiled"
          label="文件名称"
          width="120"
          align="center"
        />
        <el-table-column
          width="199"
          property="name"
          label="时间"
          align="center"
        >
          <template #default="scope">
            <p style="font-size: 15px">
              {{ new Date(scope.row.evidate).toLocaleString() }}
            </p>
          </template>
        </el-table-column>

        <el-table-column label="存证状态" width="130" align="center">
          <template #default="scope">
            <span v-if="scope.row.evistate == '1'">
              <el-icon color="#0079fe">
                <WarningFilled /> </el-icon
              >上链中</span
            >
            <span v-if="scope.row.evistate == '2'"
              ><el-icon color="#4bd863">
                <CircleCheckFilled /> </el-icon
              >成功</span
            >
            <span v-if="scope.row.evistate == '3'"
              ><el-icon color="#ff3b31">
                <CircleCloseFilled /> </el-icon>失败</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="200" align="center">
          <template #default="scope">
            <el-button
              :icon="View"
              color="#467cfd"
              circle
              @click="handlemessage(scope.$index, scope.row)"
            />
            <el-button
              :icon="Delete"
              circle
              color="#467cfd"
              @click="handleDelete(scope.$index, scope.row)"
            />
            <el-button
              :icon="Bottom"
              circle
              color="#467cfd"
              @click="goDown(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div
        class="pagintion"
        style="
          margin-left: 35%;
          margin-top: 1%;
          display: inline-flex;
          align-items: center;
        "
      >
        <div class="shit">
          <span>每页显示</span>
          <el-select
            v-model="obj.pageSize"
            class="m-s"
            style="width: 80px; display: inline-block"
          >
            <el-option
              v-for="item in optionss"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click="show()"
            />
          </el-select>
        </div>
        <el-config-provider :locale="locale">
          <el-pagination
            :locale="locale"
            background
            v-model:current-page="obj.pageIndex"
            :page-size="obj.pageSize"
            :disabled="disabled"
            :background="background"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
      </div>
    </el-card>
    <!-- 下载的内容 -->
    <div
      v-show="visible1"
      class="patter"
      style="
        width: 500px;
        height: 650px;
        position: absolute;
        top: 10%;
        left: 30%;
        z-index: 1000;
      "
    >
      <div
        ref="poster"
        id="postt"
        style="width: 450px; height: 600px; overflow: hidden"
      >
        <div
          style="
            font-size: 10px;
            border: 1px solid red;
            border-radius: 50%;
            width: 95px;
            height: 95px;
            text-align: center;
            color: red;
            position: absolute;
            right: 15%;
            bottom: 40%;
            z-index: 120;
          "
        >
          <p style="margin-top: 30px">区块链上存证</p>
          <p>专用章</p>
        </div>
        <img src="../../assets/u1512.png" style="width: 100%; height: 100%" />
        <div
          class="taimg"
          style="width: 100%; height: 100%; position: absolute; top: 0; left: 0"
        >
          <h1
            style="
              display: block;
              margin: 0 auto;
              margin-top: 15%;
              font-size: 23px;
              width: 200px;
            "
          >
            电子数据存证证书
          </h1>
          <p
            style="
              width: 100%;
              text-align: center;
              height: 3%;
              margin-top: 5%;
              font-size: 10px;
            "
          >
            存证编号：CZ2021072109551969276929
          </p>
          <p style="width: 60%; display: block; margin: 2% auto">
            区块链存证ID：0xc6966ca53fb0d3
          </p>
          <p style="width: 60%; display: block; margin: 2% auto">
            数据指纹hash：0xc6966ca53fb0d3
          </p>
          <p style="width: 60%; display: block; margin: 2% auto">
            存证名称：我的作品
          </p>
          <p style="width: 60%; display: block; margin: 2% auto">
            存证类型：司法存证
          </p>
          <p style="width: 60%; display: block; margin: 2% auto">
            内容类型：文件类型
          </p>
          <p style="width: 60%; display: block; margin: 2% auto">
            存证主体：张一三
          </p>
          <p style="width: 60%; display: block; margin: 2% auto">
            存证时间:2021年06月01日16时44分52秒
          </p>
          <p style="width: 60%; display: block; margin: 2% auto">
            区块高度:31241515
          </p>
          <p
            style="
              width: 60%;
              display: block;
              margin: auto;
              font-size: 12px;
              margin-top: 5%;
            "
          >
            证书说明：
          </p>
          <p
            style="width: 60%; display: block; margin: 0 auto; font-size: 12px"
          >
            1.本证书对应内容通过区块链进行存证，链上数据客观真实，不可篡改。
          </p>
          <p
            style="width: 60%; display: block; margin: 0 auto; font-size: 12px"
          >
            2.前往验证中心，可对本证书及证书附带的电子证据进行验证。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import html2canvas from "html2canvas";
import axios from "axios";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { onMounted, ref, reactive } from "vue";
import {
  View,
  Edit,
  Delete,
  Document,
  CircleCheckFilled,
  CircleCloseFilled,
  WarningFilled,
  Bottom,
} from "@element-plus/icons-vue";
import { ElButton, ElMessage, ElMessageBox, ElDialog } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();
let shoptype = reactive({
  shoplist: [],
});
let hotellist = reactive({
  hotel_lists: [],
});
let locale = zhCn;
let total = ref(0);
const visible1 = ref(false); //下载弹窗的开启关闭
// 向后端传递的搜索+分页的数据
let obj = ref({
  input1: "",
  input2: "",
  value: "",
  pageIndex: 1,
  pageSize: 2,
});

const optionss = [
  {
    value: 2,
    label: "2/页",
  },
  {
    value: 5,
    label: "5/页",
  },
  {
    value: 10,
    label: "10/页",
  },
];
let data = reactive({
  lists: [],
});
function show() {
  console.log(obj.value);
  axios.get("/api/cunzheng/evidence", { params: obj.value }).then((res) => {
    console.log();
    data.lists = res.data.facility_data;
    total.value = res.data.tatol;
    console.log(data.lists, "154");
  });
}

onMounted(() => {
  show();
  // showshop(), showhotel();
});
// 点击进入存证详情
const handlemessage = (index, row) => {
  router.push("/console/existinfo?id="+row._id);
}
// 新增存证
const addexisting = (index, row) => {
  router.push("/console/addexisting");
};
//删除
const handleDelete = (index, row) => {
  ElMessageBox.confirm("您确定此商品吗？", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios
        .delete("/api/cunzheng/del/existingDel?id=" + row._id)
        .then((res) => {
          ElMessage.success(res.data.msg);
          console.log(res.data.msg);
          show();
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "商品取消删除",
      });
    });
};

const handleCurrentChange = (val) => {
  obj.pageIndex = val;
  show();
};

// 新增
const form = ref({
  shop_img: "",
  shop_bianhao: "",
  shop_name: "",
  shop_price: "",
  shop_type: "",
  hotel_id: "",
  zhuantai: "",
});
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const ruleFormRef = ref();
const ruleForm = reactive({
  shop_img: "",
  shop_bianhao: "",
  shop_name: "",
  shop_price: "",
  kucun: "",
  zhuantai: "",
  shop_type: "",
  hotel_id: "",
});
const rules = reactive({
  shop_name: [{ required: true, message: "请填商品名称", trigger: "blur" }],
  shop_price: [
    { required: true, message: "请填选择广告位置", trigger: "blur" },
  ],
  shop_img: [{ required: true, message: "请填广告图片", trigger: "blur" }],
});

const addadvertising = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      //  添加商品的接口
      commodityadd(form).then((res) => {
        show();
      });

      dialogFormVisible.value = false;
    } else {
      return false;
    }
  });
};
// 图片上传
const fileList = ref([]);
const dialogImageUrl = ref();
const dialogVisible = ref(false);

const handlePictureCardPreview = (uploadFile, fileList) => {
  form.value.shop_img = uploadFile.response.path;
  //  updateData.value.img = uploadFile.response.path 修改调用
  dialogVisible.value = true;
};
const successImage = (res, file, fileList) => {
  form.value.shop_img = res.path;
  //  updateData.value.img = res.path 修改图片调用
};

// 绑定  需要把那个内容生成图片
const posterimg = ref();

const poster = ref();
// 生成图片海报
const goDown = () => {
  visible1.value = true;
  console.log(poster.value, "148");
  // 海报图默认是  2倍尺寸
  setTimeout(() => {
    html2canvas(poster.value, {
      allowTaint: true,
      useCORS: true, // 允许跨域
      width: 450, //生成海报的w
      height: 600, //生成海报的h    默认是px
      dpi: 500,
      backgroundColor: "#fff",
    }).then((canvas) => {
      // canvas 其实就是我们所讲的res 的意思 返回报文的意思
      console.log(canvas);
      let baseImg = canvas.toDataURL("image/jpg");
      let save = document.createElement("a");
      save.href = baseImg;
      // 下载的名字
      save.download = "区域链证件";
      // 直接回调a的点击事件
      save.click();
    });
    visible1.value = false;
  }, 800);
};
</script>
<style lang="less" scoped >
.cent {
  width: 100%;
  height: 90%;
  overflow: hidden;

  .box-card1 {
    margin: 0 auto;
    margin-top: 1.5%;
    padding: 10px 10px;
    width: 95%;
    height: 90%;

    .el-pagination {
      margin-left: 2%;
    }

    .shit span,
    .m-s {
      display: inline-block;
      margin-left: 5px;
    }

    .shit {
      width: 200px;
    }

    .cunname {
      width: 110px;
    }
  }
}
</style>
 
 
 